<template>
  <div>
    <h3>父组件</h3>
    <template v-if="1===1">
      <div>12323 </div>
      <div>12323 </div>
      <div>12323 </div>
    </template>
    <!-- 以前我们只能通过props 想子组件里面传递数据 -->
    <!-- 如果需要想子组件里面传递 html结构，是通过插槽的形式 -->
    <!-- 我们可以在组件使用的地方， 传递我们需要的html结构 -->
    <child-com value="123" aa="455">
      <!-- <template>
        <button slot="foot">我是在父组件里面写的button</button>
        <h3 slot="top">我是在父组件里面写的htlm结构</h3>
      </template> -->

      <!-- <div slot-scope="aaa">父组件通过插槽传递数据进入到子组件 {{ aaa }}</div> -->
      <!-- v-slot简写为# -->
      <!-- <template v-slot="aaa">
        父组件通过插槽传递数据进入到子组件 {{ aaa }}
      </template> -->
      <!-- 具名插槽和默认插槽
        这类带 name 的插槽被称为具名插槽 (named slots)。没有提供 name 的 <slot> 出口会隐式地命名为“default” -->
      <template v-slot:default="aaa">
        父组件通过插槽传递数据进入到子组件 {{ aaa }}
      </template>
      <template #foot="test">
        ssss:{{ test }}
      </template>
    </child-com>
  </div>
</template>

<script>
import ChildCom from './ChildCom.vue'
export default {
  name: 'VueAdminTemplateFatherCom',
  components: {
    ChildCom
  },

  data() {
    return {

    }
  },

  mounted() {

  },

  methods: {

  }
}
</script>

<style lang="scss" scoped>

</style>
